<template>
    <div class="father" v-if="show">
      <button @click="sun(kk)">我是父按钮</button>
      <Sun
        :show="show"
        @list-show="listShow"
        :show-name="show_name"
        :mm="sun(kk)"
        :demo="demo"
        ref="son"
        @ces="ces"
        v-model="mol"
        :arr="arr"
        v-on="$listeners"
        v-bind="$attrs"
        :syncCS.sync="syncCS"
      >
        <div>asdasdasd</div>
      </Sun>
      <button @click="demo+=1">我是计数器</button>
      <el-input placeholder="请输入内容" v-model="kk">
        <template slot="prepend">Http://</template>
      </el-input>
      <button @click="next">我来测试$on</button>
      <button @click="prev">我来测试$emit</button>
    </div>
</template>
<style lang="less" scoped>
  .father {

  }
</style>
<script>
  import Sun from './sun.vue'
  export default {
    props: {
      show: Boolean,
      syncCS: Boolean,
      liBin: {
        default: () => {
          return {}
        }
      }
    },
    data () {
      return {
        show_name: 'asfdas',
        demo: 1,
        dell: {},
        kk: '',
        mol: true,
        arr: []
      }
    },
    watch: {
      syncCS (val) {
        if(val) this.$emit('update:syncCS',val)
      }
    },
    methods: {
      next () {
        this.$emit('mit',44);
        this.$refs.son.$emit('next')
      },
      prev () {
        this.$refs.son.$emit('prev')
      },
      father () {
        this.$emit('update:show',false)
      },
      listShow(val){
        this.$emit('update:show',val);//父传子的时候必须有sync这个修饰符
        /*this.$emit('listShow',val);//这个是不用*/
      },
      sun (aa) {
        let bb=aa;
        return function () {
          return bb
        }
      },
      ces () {
        console.log(4444)
      }
    },
    components: {
      Sun
    },
    mounted () {
      let arr= [];
      let mm = 4;
      let vv = arr.filter(n => n === mm);
      console.log(vv)
      console.log(this)
      setTimeout(() => {
        this.arr = [1,2,3];
      },2000)
    }
  }
</script>
